<template>
  <div class="box">
    <Header title="企业榜单"></Header>
    <div class="search-box">
      <img src="@/assets/images/search.png" alt="">
      <input type="text" placeholder="搜景区、搜服务、搜美食">
      <button>搜索</button>
    </div>
    <div class="list-box">
      <div class="list-item" v-for="(item,index) in list" :key="index">
        <div class="img-box">
          <img :src="item.img" alt="">
        </div>
        <p>{{item.name}}</p>
      </div>
    </div>
    <van-tabs title-active-color="#0FD2B2" line-height="0">
      <van-tab v-for="(tab,i) in tabList" :title="tab.title" :key="i" >
        <ul class="tab-list-box">
          <li class="tab-list-item"  v-for="(tabItem,k) in tab.list" :key="k">
            <div>
              <i class="circle" :class="{one:tabItem.ranking==1,two:tabItem.ranking==2,three:tabItem.ranking==3}">{{tabItem.ranking}}</i>
              {{tabItem.name}}
            </div>
            <div>
              <van-rate
              v-model="tabItem.level"
              :size="14"
              color="#ee0a24"
              void-icon="star"
              void-color="#eee"
            />
            <span class="score">{{tabItem.level}}分</span>
            </div>
            <button @click="doNext">评价{{tabItem.num}}</button>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
     <Nav :Active="2"></Nav>
  </div>
</template>

<script>
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
import scenic from "@/assets/images/home-nav-scenic.png"
import hotel from "@/assets/images/home-nav-hotel.png"
import food from "@/assets/images/home-nav-food.png"
import recreation from "@/assets/images/home-nav-wc.png"
import shopping from "@/assets/images/home-nav-park.png"
import travel from "@/assets/images/home-nav-all.png"
export default {
  name:'List',
  components: { Header, Nav },
  data(){
    return{
      value:3,
      list:[{img:scenic,name:'景区'},{img:hotel,name:'酒店'},{img:food,name:'餐饮'},{img:recreation,name:'娱乐'},{img:shopping,name:'购物'},{img:travel,name:'旅行社'},],
      tabList:[{title:'旅游企业红榜',list:[{ranking:1,name:'云台山',level:4.9,num:996},{ranking:2,name:'云台山',level:4.6,num:996},{ranking:3,name:'云台山',level:4.5,num:996},{ranking:4,name:'云台山',level:4,num:996},{ranking:5,name:'云台山',level:3.9,num:996},{ranking:6,name:'云台山',level:3.8,num:996},{ranking:7,name:'云台山',level:3.6,num:996},{ranking:8,name:'云台山',level:3.5,num:996},{ranking:9,name:'云台山',level:3.5,num:996},{ranking:10,name:'云台山',level:3.2,num:996}]},{title:'旅游企业黑榜',list:[{ranking:1,name:'云台山',level:3,num:996},{ranking:2,name:'云台山',level:2.5,num:996},{ranking:3,name:'云台山',level:2.5,num:996},{ranking:4,name:'云台山',level:2.5,num:996},{ranking:5,name:'云台山',level:2.2,num:996},{ranking:6,name:'云台山',level:2,num:996},{ranking:7,name:'云台山',level:2,num:996},{ranking:8,name:'云台山',level:1.5,num:996},{ranking:9,name:'云台山',level:1.5,num:996},{ranking:10,name:'云台山',level:1.5,num:996}]}]
    }
  },
  methods:{
    doNext(){
      this.$router.push({path:'/valuation'})
    }
  }
}
</script>

<style lang="less" scoped>
.box{
}
.search-box{
  position: relative;
  display: flex;
  align-items: center;
  height: 68/7.5vw;
  margin-top:20/7.5vw;
  background-color: #F5F8FF;
  border-radius: 20/7.5vw;
  border: 1px solid #E6E6E6;
  >img{
    position: absolute;
    top:18/7.5vw;
    left:20/7.5vw;
    width: 35/7.5vw;
  }
  >input{
    flex:1;
    padding-left:70/7.5vw;
    background-color: transparent;
  }
  >button{
    width: 116/7.5vw;
    height: 48/7.5vw;
    font-size: 28/7.5vw;
    border-left:1px solid #E6E6E6;
    background-color: transparent;
  }
}
.list-box{
  margin:40/7.5vw 0 30/7.5vw;
  display: flex;
  justify-content: space-around;
  align-content: center;
  .list-item{
    text-align: center;
    .img-box{
      width: 80/7.5vw;
      height: 80/7.5vw;
      border-radius: 50%;
      overflow: hidden;
      >img{
        display: block;
        width: 100%;
      }
    }
    >P{
      font-size: 28/7.5vw;
      color: #666;
    }
  }
}
.tab-list-box{
  .tab-list-item{
    height: 94/7.5vw;
    border-bottom:1px solid #F2F2F2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28/7.5vw;
    .circle{
      display: inline-block;
      width: 32/7.5vw;
      height: 32/7.5vw;
      border-radius: 50%;
      line-height: 32/7.5vw;
      color:#666;
      font-size: 28/7.5vw;
      text-align: center;
      margin-right: 10/7.5vw;
      &.one{
        background-color: #FF0000;
        color:#fff;
      }
      &.two{
        background-color: #F09406;
        color:#fff;
      }
      &.three{
        background-color: #0FD2B2;
        color:#fff;
      }
    }
    .score{
      display: inline-block;
      width: 70/7.5vw;
      margin-left:15/7.5vw;
    }
    button{
      width: 140/7.5vw;
      height: 38/7.5vw;
      line-height: 38/7.5vw;
      background-color: transparent;
      border: 1px solid #0FD2B2;
      border-radius: 6/7.5vw;
      color: #0FD2B2;
    }
  }
}

</style>